<template>
    <div>
        <el-table ref="lotTable" :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection" width="30" />
            <el-table-column property="title" label="拍品名称" width="90" />
            <el-table-column property="price" label="起拍价(元)" width="85">
                <template #default="scope">{{ scope.row.price }}</template>
            </el-table-column>
            <el-table-column property="startprice" label="最高竟价(元)" width="95">
                <template #default="scope">{{ scope.row.startprice }}</template>
            </el-table-column>
            <el-table-column property="leader " label="最高出价人" width="95">
                <template #default="scope">{{ scope.row.leader }}</template>
            </el-table-column>
            <el-table-column property="leader" label="拍主昵称" width="80">
                <template #default="scope">{{ scope.row.leader }}</template>
            </el-table-column>
            <el-table-column property=" acutions" label="竞价/阅读" width="80">
                <template #default="scope">{{ scope.row.acutions}}</template>
            </el-table-column>
            <el-table-column property="endTime" label="结束时间" width="100">
                <template #default="scope">{{ scope.row.endTime }}</template>
            </el-table-column>
            <el-table-column property="status" label="拍品状态" width="75" />
            <el-table-column label="操作" width="50">
                <router-link to="">查看</router-link>
                <div @click="delFn">删除</div>
            </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
            <el-button @click="toggleSelection(tableData)">全选</el-button>
            <el-button @click="toggleSelection()">不选</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { getCollectCommodity } from '@/utils/api'
import { defineComponent } from 'vue'
interface User {
    title: string
    price: number
    startprice: number
    leader: string
    author: string
    acutions: number
    endTime: string
    status: string
}
export default defineComponent({
    data() {
        return {
            tableData: [{
                title: '123',
                price: 0,
                startprice: 0,
                leader: '',
                author: '',
                acutions: 1,
                endTime: '2022-5-3',
                status: '在拍 未参拍'
            },
            ]
        }
    },
    methods: {
        toggleSelection(rows?: User[]) {
            if (rows) {
                rows.forEach(row => {
                    // console.log('row...', row);
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    this.$refs.lotTable.toggleAllSelection(row, undefined)
                })
            } else {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-expect-error
                this.$refs.lotTable.clearSelection()
            }
        },
        delFn(event: any) {
            if (!confirm('是否确定删除？')) return;
            event.target.parentElement.parentElement.parentElement.remove()
        }
    },
    created() {
        getCollectCommodity().then((res: any) => {
            console.log(res.data.data);
            this.tableData = res.data.data
        }).catch(err => {
            console.log(err);

        })
    }


})


</script>

<style lang="scss" >
.cell {

    font-size: 12px;
    padding: 0 5px;
}

.el-button {
    height: 20px;
    font-size: 12px;
}
</style>